import React, { useEffect } from 'react';
import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native';
import Animated, { 
  useSharedValue, 
  useAnimatedStyle,
  withTiming,
  Easing,
  runOnJS,
} from 'react-native-reanimated';
import { useAIStore } from '../store/ai';

export const VoiceOverlay = () => {
  const { 
    isOverlayVisible, 
    handleOverlayDismiss, 
    currentRecognitionText,
    status,
    displayedText 
  } = useAIStore();
  
  const overlayOpacity = useSharedValue(0);

  useEffect(() => {
    if (isOverlayVisible) {
      overlayOpacity.value = withTiming(1, { duration: 500, easing: Easing.bezier(0.25, 0.1, 0.25, 1) });
    } else {
      overlayOpacity.value = withTiming(0, { duration: 400, easing: Easing.bezier(0.25, 0.1, 0.25, 1) }, () => {
        runOnJS(handleOverlayDismiss)();
      });
    }
  }, [isOverlayVisible]);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: overlayOpacity.value,
  }));

  const getStatusText = () => {
    switch (status) {
      case 'voiceinput':
        return '请说话...';
      case 'thinking':
        return '思考中...';
      case 'speaking':
        return '正在回答...';
      default:
        return '';
    }
  };

  if (!isOverlayVisible) return null;

  return (
    <TouchableWithoutFeedback onPress={handleOverlayDismiss}>
      <Animated.View style={[styles.overlay, animatedStyle]}>
        <View style={styles.container}>
          <View style={styles.content}>
            {/* 用户问题区域 */}
            {currentRecognitionText && (
              <View style={styles.questionSection}>
                <Text style={styles.sectionTitle}>我的问题</Text>
                <View style={styles.textBlock}>
                  <Text style={styles.userText}>{currentRecognitionText}</Text>
                </View>
              </View>
            )}
            
            {/* 状态提示 */}
            <Text style={styles.statusText}>{getStatusText()}</Text>
            
            {/* 机器人回复区域 */}
            {displayedText && (
              <View style={styles.answerSection}>
                <Text style={styles.sectionTitle}>万小户回答</Text>
                <View style={[styles.textBlock, styles.answerBlock]}>
                  <Text style={styles.botText}>{displayedText}</Text>
                </View>
              </View>
            )}
          </View>
        </View>
      </Animated.View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    zIndex: 900,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: 100,
  },
  content: {
    width: '90%',
    maxWidth: 500,
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    borderRadius: 16,
    padding: 20,
    gap: 16,
  },
  questionSection: {
    gap: 8,
  },
  answerSection: {
    gap: 8,
    marginTop: 8,
  },
  sectionTitle: {
    color: '#888',
    fontSize: 14,
    marginLeft: 4,
  },
  textBlock: {
    padding: 16,
    borderRadius: 12,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
  },
  answerBlock: {
    backgroundColor: 'rgba(168, 255, 96, 0.1)',
  },
  userText: {
    color: '#fff',
    fontSize: 18,
    lineHeight: 28,
  },
  botText: {
    color: '#a8ff60',
    fontSize: 18,
    lineHeight: 28,
  },
  statusText: {
    color: '#999',
    fontSize: 14,
    textAlign: 'center',
    marginVertical: 8,
  },
});